document.addEventListener('DOMContentLoaded', function () {
  const chatMessages = document.getElementById('chatMessages');
  const userInput = document.getElementById('userInput');
  const sendButton = document.getElementById('sendMessage');
  const clearButton = document.getElementById('clearChat');

  // 发送消息
  async function sendMessage() {
    const message = userInput.value.trim();
    if (message) {
      // 添加用户消息
      addMessage(message, 'user');

      // 显示加载状态
      const loadingDiv = showLoading();

      try {
        // 调用Ollama API生成剧本
        const aiResponse = await generateScript(message);
        // 移除加载状态
        loadingDiv.remove();
        // 添加AI响应
        addMessage(aiResponse, 'ai');
      } catch (error) {
        // 移除加载状态
        loadingDiv.remove();
        // 显示错误消息
        addMessage("抱歉，生成剧本时出现错误，请稍后重试。", 'ai');
        console.error('Error:', error);
      }

      userInput.value = '';
    }
  }

  // 显示加载状态
  function showLoading() {
    const loadingDiv = document.createElement('div');
    loadingDiv.className = 'message ai-message';
    loadingDiv.innerHTML = `
      <div class="avatar">AI</div>
      <div class="message-content loading">
        <div class="loading-dots">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    `;
    chatMessages.appendChild(loadingDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
    return loadingDiv;
  }

  // 添加剧本生成的特定提示词
  function generateScriptPrompt(userInput) {
    return `请基于以下主题或情节创作一个剧本：
${userInput}

请按照以下格式输出：
标题：
场景：
人物：
对话：

请确保剧本具有戏剧性和吸引力。`;
  }

  // 修改调用API的部分
  async function generateScript(userInput) {
    const prompt = generateScriptPrompt(userInput);
    return await callOllamaAPI(prompt);
  }

  // 格式化提示词
  function formatPrompt(userInput) {
    return `请根据以下要求生成一个剧本大纲：

${userInput}

如果是梦幻仙侠类型，请额外注意：
- 设定修仙体系（如：练气、筑基、金丹、元婴等）
- 加入仙侠元素（如：法宝、丹药、功法、秘境等）
- 描述修仙世界的特色（如：宗门、势力、天地规则等）

请按照以下格式生成剧本：

1. 剧本标题
2. 主要人物介绍（包含修为境界、特殊能力）
3. 故事背景（包含世界观设定）
4. 故事梗概
5. 分场大纲

要求：
- 情节要符合逻辑
- 人物性格要鲜明
- 故事要有起承转合
- 结局要完整
- 分场要清晰
- 符合该类型剧本的特色

请开始生成剧本。`;
  }

  // 添加消息到聊天窗口
  function addMessage(content, type) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${type}-message`;

    const avatar = document.createElement('div');
    avatar.className = 'avatar';
    avatar.textContent = type === 'user' ? '用户' : 'AI';

    const messageContent = document.createElement('div');
    messageContent.className = 'message-content';
    // 将换行符转换为HTML换行
    messageContent.innerHTML = content.replace(/\n/g, '<br>');

    messageDiv.appendChild(avatar);
    messageDiv.appendChild(messageContent);
    chatMessages.appendChild(messageDiv);

    // 滚动到底部
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }

  // 清空聊天记录
  function clearChat() {
    chatMessages.innerHTML = '';
    addMessage(`您好！我是您的AI剧本创作助手。请告诉我：

1. 剧本的类型（如古风武侠、梦幻仙侠、现代都市、科幻题材等）
2. 想要的主要角色数量和简单描述
3. 故事发生的背景设定
4. 其他特殊要求

对于梦幻仙侠类型，您还可以指定：
- 期望的修仙体系
- 特色法宝或功法
- 宗门势力设定

我会根据您的需求生成一个完整的剧本大纲。`, 'ai');
  }

  // 事件监听
  sendButton.addEventListener('click', sendMessage);
  userInput.addEventListener('keypress', function (e) {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      sendMessage();
    }
  });
  clearButton.addEventListener('click', clearChat);

  // 初始化欢迎消息
  clearChat();
}); 